import { filter, showFilter } from '../config'
import { getLocal } from './storage'

/**
 * 更新指定键的数据
 * @param {string} key - 数据键名
 * @param {Array} data - 新数据
 * @description 保存旧数据到old_键名，然后替换为新数据
 */
export function updateData(key, data) {
  // 保存旧数据用于撤销操作
  window[`old_${key}`] = [...window[key]]
  // 清空当前数据
  window[key].length = 0
  // 添加新数据
  window[key].push(...data)
}

/**
 * 初始化数据
 * @param {Object} zr - zrender实例
 * @param {Function} redrawChart - 重绘图表的函数
 * @description 从本地存储获取数据，初始化甘特图
 */
export function initData(zr, redrawChart) {
  // 隐藏画布，等待数据加载完成
  zr.dom.style.opacity = 0
  
  try {
    // 从本地存储获取数据
    const tasks = getLocal('tasks')
    const mileStones = getLocal('mileStones')
    
    if (tasks && tasks.length > 0) {
      // 根据过滤条件处理任务数据
      const filteredTasks = tasks.filter(item => 
        filter ? item.fillColor === filter : true
      )
      
      // 更新任务和里程碑数据
      updateData('tasks', filteredTasks)
      updateData('mileStones', mileStones || [])
    } else {
      // 没有数据时添加默认空任务
      window.tasks.push({})
    }
    
    // 更新过滤选项
    updateFilterItems(tasks)
    
    // 重绘图表并显示画布
    redrawChart(true)
    zr.dom.style.opacity = 1
  } catch (error) {
    // 出错时也要显示画布
    zr.dom.style.opacity = 1
  }
}

/**
 * 更新过滤选项
 * @param {Array} data - 任务数据
 * @description 根据任务数据更新颜色过滤器的选项
 */
export function updateFilterItems(data) {
  // 检查是否启用了数据存储和过滤功能
  if (!showFilter) return
  if (!data) return
  
  const $colorPicker = document.querySelector('#color-picker')
  if (!$colorPicker) return
  
  // 移除之前的事件监听器
  $colorPicker.removeEventListener('click', onColorPickerClick)
  // 添加新的事件监听器
  $colorPicker.addEventListener('click', onColorPickerClick)
  
  // 提取所有唯一的颜色值
  const uniqueColors = [...new Set(
    data.map(({ fillColor }) => fillColor)
  ), ''].filter(color => color !== undefined)
  
  // 生成颜色选择器的HTML
  const colorOptions = uniqueColors.map(color => 
    `<div data-color="${color}" style="background-color: ${color};"></div>`
  )
  
  $colorPicker.innerHTML = colorOptions.join('')
}

/**
 * 颜色选择器点击事件处理
 * @param {Event} e - 点击事件
 * @description 处理颜色过滤器的点击事件
 */
function onColorPickerClick(e) {
  // 由于配置现在是硬编码的，过滤功能暂时禁用
  // 可以通过修改 config/ui.js 中的 filter 值来实现过滤
  if (e.target.dataset?.color) {
    e.target.dataset.hovered = true
  }
} 